<template>
  <div class="app-container">
    <el-form label-width="80px" size="mini">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用工单号" prop="taskNumber">
            <el-input v-model="this.taskNumber" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用工日期" prop="needTime">
            <el-input v-model="this.needTime" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班次" prop="timeShiftName">
            <template v-for="item in operationNeedList">
              <el-input v-model="item.tsName" :disabled="true" maxlength="30"/>

            </template>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="男女比例" prop="manNumberScale">
            <el-input v-model="this.manAndWoman" :disabled="true" maxlength="30"/>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="预测零工" prop="">
            <el-input  v-model="this.personnelOddNumber" maxlength="30" :disabled="true" >
              <i slot="append" style="margin-right: 10px">人</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渠道分配" prop="">
            <el-input  v-model="this.total" maxlength="30" :disabled="true" >
              <i slot="append" style="margin-right: 10px">人</i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员差额" prop="">
            <el-input  v-model="this.differenceNum" maxlength="30" :disabled="true" >
              <i slot="append" style="margin-right: 10px">人</i>
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="18">
          <template v-for="item in operationNeedList">

            <StaffTable :tableData="item.timeShiftValue" :disabled="true"></StaffTable>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <h5>变更记录</h5>
        <p v-for="(item,i) in taskChangePojos">{{item.createTime}} {{item.changData}}</p>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { viewStaffAssignments } from "@/api/job/staffAssignments/staffAssignments";
  import { StaffTable } from "../components"
  export default {
    components:{ StaffTable },
    name: "attendanceGroup",
    created() {
      this.viewStaffAssignments();
    },
    data() {
      return {
        // 表格数据
        operationNeedList: [],
        taskChangePojos: [],
        manNumberScale:undefined,
        womanNumberScale:undefined,
        manAndWoman:'',
        total:0,
        differenceNum:0,
        personnelOddNumber:0,
        // 是否显示弹出层（数据权限）
        openDataScope: false,
        menuExpand: false,
        menuNodeAll: false,
        deptExpand: true,
        deptNodeAll: false,
        staffAssignmentsId: this.$route.query.staffAssignmentsId,
        taskNumber:undefined,
        needTime:undefined,
        remark:undefined,
        defaultProps: {
          children: "children",
          label: "label",
        },
      };
    },

    methods: {
      viewStaffAssignments(){
        let total =0;
        let differenceNum =0;
        viewStaffAssignments(this.staffAssignmentsId).then(es=>{
          this.operationNeedList = es.data.timeShiftData;
          this.operationNeedList.forEach(function(item) {
            total=total+item.totalNum;
          });

            this.taskChangePojos = es.data.taskChangePojos,
            this.taskNumber = es.data.taskNumber,
            this.needTime = es.data.needTime,
            this.personnelOddNumber=es.data.personnelOddNumber,
              this.total=total;
          differenceNum =total-es.data.personnelOddNumber;
          if(differenceNum >0){
            this.differenceNum ="增加"+differenceNum+"人";
          }else if(differenceNum< 0){
            this.differenceNum ="减少"+Math.abs(differenceNum)+"人";
          }else{
            this.differenceNum = differenceNum;
          }


          this.manAndWoman ="男"+es.data.manNumberScale+"%  "+ "女"+es.data.womanNumberScale+"%";
        })
      },
    }
  };
</script>
